.demo-tabs {
  background: #f5f7f9;
}

/deep/.el-tabs__header {
  padding: 0 12px 0 12px;
  margin:  12px 0px 12px 0px;
  border-bottom: none;

  // background: #f5f7f9;
  .el-tabs__nav-wrap {
    margin-bottom: none;
    background: #FFFFFF;

    .el-tabs__nav-scroll {
      height: 50px;
      display: flex;
      align-items: center;
      padding-left: 10px;

      .el-tabs__nav {
        border-bottom: 0.0625rem solid var(--el-border-color-light);
        border-radius: 0.25rem;

        .el-tabs__item {
          height: 30px;
        }

        .el-tabs__item:hover {
          background: #D3D4D5;
          color: gray;
        }

        .el-tabs__item.is-active {
          color: #FFFFFF;
          background: #2F7DF1;
          border-bottom-color: #2F7DF1;
        }
      }
    }
  }
}


.table-common {
  width: 100%;
  background-color: #fff;

  .goods {
    max-height: 450px;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;

    .goods_content:hover,
    .return_goods_content,
    .goods_content_select:hover {
      cursor: pointer;
    }

    .goods_content,
    .return_goods_content,
    .goods_content_select {
      width: calc(100% / 3 - 24px);
      height: 180px;
      background: #F3F4F7;
      border-radius: 8px;
      margin-top: 24px;
      margin-right: 24px;
      display: flex;
      align-items: center;
      position: relative;

      .image {
        width: 132px;
        height: 132px;
        border-radius: 10px;
        margin-left: 15px;
      }

      .message {
        margin-left: 24px;
        margin-top: 5px;
        width: 100%;
        .message_content {
          display: flex;
          margin-top: 4px;
          .type {
            position: relative;
            font-size: 16px;
            font-family: HarmonyOS_Sans_SC_Bold;
            color: #535862;
            font-weight: bolder;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            max-width: 40%;
          }
          .pickUpPlace {
            position: relative;
          }
          .type:hover::after,.pickUpPlace:hover::after{
            position:absolute;
            top:50px;
            left:0;
            content:attr(data-title);
            border-radius:5px ;
          }

          .terminal {
            margin-left: 5px;
            display: inline-block;
            text-align: center;
            width: auto;
            padding: 0 5px;
            height: 22px;
            line-height: 22px;
            background: rgba(0, 148, 255, 0.12);
            border-radius: 6px;
            border: 1px solid rgba(47, 143, 241, 0.4);
            font-size: 12px;
            color: #2F7DF1;
            ;
          }

          .headline {
            width: 70px;
            height: 22px;
            font-size: 14px;
            font-family: HarmonyOS_Sans_SC;
            color: #989DAA;
            line-height: 22px;
          }

          .headline_content {
            height: 22px;
            font-size: 14px;
            font-family: HarmonyOS_Sans_SC;
            color: #535862;
            line-height: 22px;
            width: 45%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .return_goods_content{
       background: #D3D4D5;
       position: relative;
       .received-img {
        position: absolute;
        left: calc(50% - 50px);
        top:  calc(50% - 44px);
        width: 100px;
        height: 88px;
       }
    }
    .goods_content_select {
      background: #EBF2FA;
      border: 1px solid #327ECB;
    }

    .hidden_overdue {
      display: none;
    }

    .red_overdue {
      height: 22px;
      background: rgba(255, 71, 36, 0.12);
      border-radius: 6px;
      border: 1px solid rgba(255, 76, 45, 0.4);
      font-size: 14px;
      font-family: HarmonyOS_Sans_SC;
      color: #F24A45;
      line-height: 22px;
      padding:0 5px;
      position: absolute;
      top: 3px;
      right: 8px;
    }

    .green_overdue {
      height: 22px;
      background: rgba(255, 179, 31, 0.12);
      border-radius: 6px;
      border: 1px solid rgba(255, 159, 58, 0.4);
      font-size: 14px;
      font-family: HarmonyOS_Sans_SC;
      color: #FF8F3A;
      line-height: 22px;
      padding-left: 8px;
      padding-right: 8px;
      position: absolute;
      top: 3px;
      right: 8px;
    }
  }
}

.detail_content {
  display: flex;
  justify-items: center;
  align-items: center;
  padding: 24px;
  padding-bottom: 0px;

  .detail_body {
    width: auto;
    height: 240px;
    // background: rgba(238,243,255,0.56);
    border-radius: 8px;
    margin-left: 24px;
    padding-left: 24px;
    // padding-top: 16px;
    padding-bottom: 16px;
    box-sizing: border-box;

    .body_message {
      display: flex;
      line-height: 25px;

      .message_title {
        width: 100px;
        text-align: left;
        margin-bottom: 8px;
        font-size: 14px;
        font-family: HarmonyOS_Sans_SC;
        color: #989DAA;
      }
      .deliver_label {
         width: 185px;
      }
      .message_content {
        font-size: 14px;
        font-family: HarmonyOS_Sans_SC;
        color: #535862;
        margin-left: 10px;
      }
    }
  }
}
.buttonCancel {
  width: 88px;
}

.buttonReceive {
  width: 88px;
  color: #FFFFFF;
  background: #337FCC;
  border-radius: 6px;
  border: 1px solid #337FCC;
}
